import { Button, Card, Table } from "antd";
import React, { useEffect, useState } from "react";
import { getUserDownInfo } from "../../../../service/fileinfo";
import { pageRequest } from "../../../../utils/pageRequest";

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    width: 80,
    align: "center",
    render: (txt, record, index) => index + 1,
  },
  {
    title: "用户",
    width: 240,
    dataIndex: "userName",
  },
  {
    title: "今日下载量",
    dataIndex: "todayDownload",
  },
  {
    title: "总下载量",
    dataIndex: "sumDownload",
  },
];

function UserDownInfo() {
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    pageRequest(1, 10, getUserDownInfo, setDataSource, setTotal);
  }, []);
  return (
    <Card
      title="用户下载量"
      type="inner"
      bordered={true}
      extra={
        <Button
          type="primary"
          onClick={() =>
            pageRequest(1, 10, getUserDownInfo, setDataSource, setTotal)
          }
        >
          刷新
        </Button>
      }
    >
      <Table
        scroll={{
          scrollToFirstRowOnChange: true,
          x: "max-content",
          y: "calc(100vh - 420px)",
        }}
        rowKey="userName"
        columns={columns}
        dataSource={dataSource}
        bordered
        pagination={{
          total: total,
          pageSize: 10,
          onChange: (page, pageSize) => {
            console.log(page, pageSize)
            pageRequest(
              page,
              pageSize,
              getUserDownInfo,
              setDataSource,
              setTotal
            );
          },
        }}
      />
    </Card>
  );
}

export default UserDownInfo;
